<template>
  <view class="product-card" @click="gotoProductDetail">  
    <image :src="imageUrl" class="product-image" mode="aspectFill" />
    <view class="product-details">
      <text class="product-title">{{ title }}</text>
      <text class="product-price">{{ formattedPrice }}/{{unit}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "ProductCard",
  props: {
    imageUrl: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
	unit:{
		type:String,
		required:true,
	},
	productId:{
		type:Number,
		require:true,
	}
  },
  computed: {
    formattedPrice() {
      return `￥${this.price.toFixed(2)}`; // 格式化价格为两位小数
    },
  },
  methods:{
	  gotoProductDetail() {
	       wx.navigateTo({
	             url: `/pages/product/detail/detail?productID=${this.productId}`,
	           });
	      },
  }
};
</script>

<style scoped lang="scss">
.product-card {
  width: 175px;
  height: 230px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.product-image {
  //width: 100%;
 height: 70%;
}

.product-details {
  padding: 16px;
  text-align: left; /* 改为左对齐 */
  width: 100%; /* 确保宽度占满 */
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  white-space: nowrap; /* 不允许换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  max-width: 100%; /* 确保宽度自适应 */
}

.product-price {
  font-size: 14px;
  color: #ff4d4f;
  white-space: nowrap; /* 防止换行 */
  margin-top: 4px;
}
</style>
